<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link href="/css/c3.css" rel="stylesheet" type="text/css">

    <%--<script type="text/javascript" src="/js/jquery-1.7.2.js"></script>--%>
    <%--<script src="/js/d3.v3.min.js" charset="utf-8"></script>--%>
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script src="/js/c3.js"></script>
    <script type="text/javascript" src="/js/jquery-1.11.1.min.js"></script>

</head>


<body>
<div>
    <br>gaoli的智能硬件V1.0上线<br><br>
</div>
<div id="chart"> hello1</div>
<div>
    点击按钮查询
    <button id="send_config" onclick="req_data()" style="width: 80px;height: 27px;font-size: 14px;font-weight: bold;"  value="配置"></button>
</div>
<br>
<br>
<div>
    输入设备号<input id="device_id" value="00001">
</div>
<script>
    var json_data;
    var chart;
    function req_data() {
        var id_url = "/viewchart.do/" + $("#device_id").attr("value");
        $.ajax({
            url: id_url,
            //data: f,
            dataType: 'json',
            type: 'GET',
            timeout: 10000,
            success: function (json_data) {
                json_data = eval(json_data);
                chart.load(
                        json_data
                );
                chart.transform('spline');
            }
        });
    }

    chart = c3.generate({
        data: {
            columns: []
//            x: 'time',
//            columns: [
//                ['time', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04', '2013-01-05', '2013-01-06'],
//                ['data1', 30, 200, 100, 400, 150, 250],
//                ['data2', 130, 340, 200, 500, 250, 350]
//            ]
        },
        axis: {
            x: {
                label: {
                    text: 'X Label',
                    position: 'inner-left'
                },
                type: 'categories',
                tick: {
                    culling: {
                        max: 60// the number of tick texts will be adjusted to less than this value
                    },
                    fit: true,
                    rotate: 20
                }
            },
            y: {
                label: {
                    text: 'Y Label',
                    position: 'outer-middle'
                },
                tick: {
                    count: 20,
                    format: function (y) {
                        return y.toFixed(2);
                    }
                }
            }

        },
        legend: {
            position: 'right'
        },
        padding: {
            bottom: 40,
        },
        grid: {
            y: {
                show: true
            },
            x: {
                show: true
            }
        },
        tooltip: {
            //enabled: false
        },
        zoom: {
            //enabled: true
        },
        subchart: {
            //show: true
        }
    });
</script>

</body>
</html>
